import { useState, useEffect } from "react";
import { resourcePath } from "../../../../../../../../utils/resource";
import PanelLeft from "../../../../../../../common/PanelLeft";
import { InputNumber, Radio, Space } from "antd";

export default function Jyll(props){
    const [radius, setRadius] = useState();
    
    return <PanelLeft>
        <div style={{
            width: 350,
            position: "absolute",
            left: 70,
            top: 30,
            bottom: 30,
            background: 'rgb(1,15,31,0.5)',
            pointerEvents: 'auto',
            borderRadius: 8
        }}><div style={{
            fontSize: 20,
            fontWeight: "bold"
        }}>
            <div className="jyll-component" style={{
                background: `url(${resourcePath.blockTitleBg})`,
                height: '100%',
                backgroundSize: '100% 100%',
                fontSize: 18,
                lineHeight: '36px',
                paddingLeft: 12,
                fontWeight: 'bold'
            }}>救援力量</div>
        </div>
            
            <div className="Jyll-top" style={{
                padding: 12
            }}>
                <Space>
                    <Radio.Group size='small' value={radius} onChange={e => {
                        setRadius(e.target.value)
                    }} buttonStyle="solid">
                        <Radio.Button value={5}>5km</Radio.Button>
                        <Radio.Button value={10}>5km</Radio.Button>
                        <Radio.Button value={15}>5km</Radio.Button>
                    </Radio.Group>
                    <InputNumber size="small" placeholder="其他数值" addonAfter={"km"} style={{
                        width: 120
                    }} onChange={value => {
                        setRadius(value)
                    }}></InputNumber>
                </Space>
            </div>
        </div>
       
    </PanelLeft>
}